import React from 'react'
import { useState } from 'react';
import { useEffect } from 'react';

const YzmButton = () => {
    let [btnText,setBtnText]=useState('获取验证码')
    let [disabled,setDisabled]=useState(false)
    let interval=null;
    useEffect(()=>{
        return ()=>{
            console.log('unmount')
            if(interval){
                clearInterval(interval)
            }
        }
    },[])
    const startYzm=()=>{
        let i=60;
        setDisabled(true)
        interval=setInterval(()=>{
            i--;
            if(i >= 0){
                setBtnText(`${i}s`)
            } else {
                setBtnText('重新获取验证码');
                setDisabled(false);
            }
        },1000)
    }
  return (
    <div>
      <button onClick={startYzm} disabled={disabled}>{btnText}</button>
    </div>
  )
}

export default YzmButton
